這一篇要介紹的是如何使用 JavaScript 來取得或控制元素的內容～～

setAttribute() 與 getAttribute()

setAttribute()

• 替指定元素加上某個屬性與屬性值。
• 若已有此屬性，則會更新屬性值。
• 若無此屬性則會添加上去。

element.setAttribute(name, value);

參數說明：

• name：要設定的屬性名稱字串。
  • 因為 html 的標籤不分大小寫，故不論如何設定，都會被轉換為全小寫。
  • 例：設定 newDiv.setAttribute(ID, user0035)，會被轉換為 <div id="user0035"></div>
• value：是一個字串，為被指定給予這個屬性的值。
  • 任何非字串值都會被轉換為字串。
• 回傳值：none
• 若想使用布林值作為 value，無論值為何，一律被視為 true。
• 為了使屬性值為 false，建議將 value 設為空字串 ""。

getAttribute()

• 得到目標元素上的指定屬性值。
• 若屬性不存在則回傳 null 或空字串。

// 語法
getAttribute(attributeName)

參數說明：

• attributeName：想要取得值的屬性名稱
• 回傳值：目標屬性的值，是字串

來個練習吧！例子來自 GPT

<a href="https://example.com">Visit Example</a>
<!-- setAttribute 更改後會變下面這樣 -->
<!-- <a href="https://www.google.com">Visit Example</a> -->

// 使用 getAttribute() 從元素中獲取屬性值
const elA = document.querySelector('a');
const elAHref = elA.getAttribute("href");
console.log(elAHref); // https://example.com

// 使用 setAttribute() 更改元素的屬性值
elA.setAttribute("href", "https://www.google.com");

data-*

• 可為 HTML 元素加上以 data- 開頭的自訂屬性名稱，使 HTML 可以藉 JavaScript 與其 DOM 交流資訊。
• 可接受任何遵循 XML 格式的自訂名稱

自訂部分 * 的建議限制：

• 不可以 xml 作為開頭
• 自訂內容中，不可使用分號 :
• 不可包含任何大寫字母

來個練習吧！例子來自 GPT

<div id="user" data-user-id="123">data-*</div>

// 使用 data-* 屬性存放與使用自定義資料
const targetDiv = document.querySelector("#user");
targetDiv.setAttribute("data-user-name", "JohnDoe");
const userName = targetDiv.getAttribute("data-user-name");
const userId = targetDiv.getAttribute("data-user-id");

// 使用者名稱：JohnDoe；使用者ID：123
console.log(`使用者名稱：${userName}；使用者ID：${userId}`);

innerHTML

• 取得或設定元素中的 HTML
• 若已有值，會以新值覆蓋。
• 若欲設定的內容含有 &<> 這些符號，innerHTML 會將其轉換為 &, < 和 >。此種狀況請改用 Node.textContent 來修改內容。
• 修改後畫面會重新渲染
• 設定 innerHTML 時會刪掉目標元素的所有後代，並將給予的字串解析後再替換節點.
• 插入字串的內容可能導致 XSS 攻擊（Cross-site scripting），使用時請注意
• 為網站做安全檢查時，使用 innerHTML 可能會被抓出來鞭 (欸

// 語法
// 取得目標元素
const list = document.querySelector(".list");
// 取得目標元素的 HTML
const html = list.innerHTML;

來個練習吧！例子來自 GPT，略為修改

<!-- Q1 -->
<div id="myDiv">原始內容</div>
<button onclick="updateContent()">更新內容</button>

<!-- Q2 -->
<ul id="myList"></ul>
<button onclick="addListItem()">新增列表項目</button>

// Q1. 更新元素內容
function updateContent() {
  const myDiv = document.getElementById("myDiv");
  if (myDiv.innerHTML == "原始內容") {
    myDiv.innerHTML = "新的內容";
  } else {
    myDiv.innerHTML = "原始內容";
  }
}

// Q2. 動態新增列表
function addListItem() {
  const myList = document.getElementById("myList");
  const listItem = document.createElement("li");
  listItem.innerHTML = "新的li";
  myList.appendChild(listItem);
}

innerText

• 為目標節點與其後代的渲染內容（文字）
• 取值時，取得的內容近似使用者以滑鼠選取螢幕內容時得到的文字
• 修改時，會將目標節點的後代以給定值替換。
  • 若遇到任何斷行（line breaks，例如 \n），會自動轉換為 <br>
• 與 textContent 的差異為，innerText 知道渲染後的結果，而 textContent 不知道
• 會受 CSS 影響，可能導致瀏覽器需耗費效能以重新渲染、計算部分或全部頁面，須盡量避免此種狀況（reflow）。

來個練習吧！例子來自 GPT，略為修改

<div id="innerTextDiv">原始內容</div>
<button onclick="updateText()">更新內容</button>

// Q. 更新元素內容
function updateText() {
  const myDiv = document.getElementById('innerTextDiv');
  myDiv.innerText = '文字內容被更新惹';
};

textContent

• 一個字串，表示節點與其後代的文字內容
• 若節點是 document 或 doctype，會得到 null
• 若節點類型為 CDATA 欄位、處理指令（Processing Instruction），或是文字節點，則會回傳節點內的文字
• 若是其他類型的節點，textContent 會將每個子節點們的內容合併後回傳。若無子節點則回傳空字串。
• 對節點設定 textContent 時，會刪去全部子節點，再替換為具給定值的單一文字節點。
• 與 innerText 的差異：
  • textContent 會取得所有元素的內容，包含 <script> 與 <style> 元素；innerText 只會顯示渲染出的結果（給人看的）。
  • textContent 會回傳節點中的每個元素，而 innerText 會受 CSS 影響，無法回傳被隱藏的資訊
• 與 innerHTML 的差異：
  • 因 textContent 的值不會被解析為 html，故可防止 XSS 攻擊；但 innerHTML 會解析內容，故無法防止 XSS 攻擊

來個練習吧！例子來自 GPT，略為修改

<div id="textContentDiv">原始內容</div>
<button onclick="updateDiv()">更新內容</button>

// 以 textContent 更新文字內容
function updateDiv() {
  const content = document.getElementById('textContentDiv');
  content.textContent = '新的內容';
};

快惹快惹，鐵人賽快結束惹（握拳
還有好多東西想學／想寫／想做！

參考資料

• Web API 們?：[Web API 接口参考 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/API
• Element: innerHTML property - Web APIs | MDN，https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
• Element.setAttribute() - Web API 接口参考 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute
• Element: getAttribute() method - Web APIs | MDN，https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
• data-* - HTML: HyperText Markup Language | MDN，https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
• element.innerHTML - Web API 接口参考 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
• Node: textContent property - Web APIs | MDN，https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent